<template>
    <el-card shadow="never" class="border-0">
      <!-- 搜索 -->
      <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
        <el-row :gutter="20">
          <el-col :span="5" :offset="0">
            <el-form-item label="资料名称">
              <el-input v-model="searchForm.title" placeholder="资料名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <div class="flex items-center justify-end">
              <el-button type="primary" @click="initTableData">搜索</el-button>
              <el-button @click="resetSearchForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
  
      <!-- 表格数据 -->
      <el-table :data="tableData" stripe style="width: 100%" v-loading="loading"
            @select="handlerSelect"
            @selection-change="handleSelectionChange"
            @row-click="rowClickHandle"
            highlight-current-row
            ref="multipleTableRef">

        <el-table-column label="资料名称" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.title }}
          </template>
        </el-table-column>
  
        <el-table-column label="资料描述" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.description }}
          </template>
        </el-table-column>

        <el-table-column label="状态" align="center">
          <template #default="{ row }">
            {{ row.state==0?"下架":"上架" }}
          </template>
        </el-table-column>
  
        <el-table-column label="创建人" align="center">
          <template #default="{ row }">
            {{ row.createUsername }}
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center">
          <template #default="{ row }">
            {{ dateFormatter(row.createTime) }}
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页组件 -->
      <div class="flex items-center justify-center mt-5">
        <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage" :page-size="limit"
          @current-change="initTableData" />
      </div>
    </el-card>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { dateFormatter } from '~/utils/common.js'
import { getInfoLibraryList } from "~/api/supply"

//表格数据以及分页参数
const tableData = ref([]) // 列表数据
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const loading = ref(false)

//选中数据
const selectCheckList = ref([])
const multipleTableRef = ref()


// 查询条件
const searchForm = reactive({
    title: "",
    //资料类型（0：操作手册 1：常见问答）
    type: "0",
    //只加载在用状态数据
    state: "1",
    page: currentPage.value,
    size: limit.value,
})

/**
 * table行点击事件
 * @param row 
 */
function rowClickHandle(row) {
  const selectData = selectCheckList
  multipleTableRef.value.clearSelection()
  if (selectData.length == 1) {
        const [item] = selectData;
        const shouldSelect = item !== row;
        multipleTableRef.value.toggleRowSelection(row, shouldSelect);
  } else {
      multipleTableRef.value.toggleRowSelection(row, true);
  }
}
//当用户手动勾选数据行的 Checkbox 时触发的事件
function handlerSelect(selection, row) {
  //清除 所有勾选项
  multipleTableRef.value.clearSelection()
  if(selection.length == 0) return
  multipleTableRef.value.toggleRowSelection(row,true)
}

//当选择项发生变化时会触发该事件
function handleSelectionChange(val) {
  selectCheckList.value = val
  getCheckedInfoLibrary()
}

// 生命周期
onMounted(() => {
    //加载表格数据
    initTableData()
})

//获取列表数据
function initTableData(p = null) {
    //指定页码是否为空
    if (typeof p == "number") {
      currentPage.value = p
    }
  
    loading.value = true
    searchForm.page = currentPage.value

    getInfoLibraryList(searchForm)
      .then(res => {
          if(res){
            tableData.value = res.records      
            total.value = res.total
          }else{
            tableData.value = []  
            total.value = 0
          }
      })
      .finally(() => {
        loading.value = false
      })
}

// 重置搜索框
const resetSearchForm = () => {
    searchForm.title = ""
    initTableData()
}

// 对外暴露方法
const emit = defineEmits([
    'getCheckedInfoLibrary',
])

const getCheckedInfoLibrary = () => {
    const selectData = selectCheckList
    let returnParams = selectData.value.length == 1 ? selectData.value[0] : null
    emit("getCheckedInfoLibrary", returnParams)
}
</script>

<style>
.el-table__header-wrapper .el-checkbox{
	display:none
 }
</style>
